<template>
    <div class="patent">
        <el-row :gutter="24">
            <el-col :span="24">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">

                    <el-form-item label="公开公告号">
                        <!-- <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="搜索"
                            @select="handleSelect"></el-autocomplete> -->
                        <el-input v-model="formInline.gk_gg_h" placeholder="搜索"></el-input>
                    </el-form-item>
                    <el-form-item label="专利名称">
                        <!-- <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="搜索"
                            @select="handleSelect"></el-autocomplete> -->
                        <el-input v-model="formInline.zlmc" placeholder="搜索"></el-input>
                    </el-form-item>
                    <el-form-item label="官方绝限">
                        <el-date-picker v-model="formInline.gfjx" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="年费状态">
                        <el-select v-model="formInline.nfzt" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="resetForm()">重置</el-button>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-table :data="tableData" border style="width: 100%" align="center">
                    <el-table-column type="index" width="50" center>
                    </el-table-column>

                    <el-table-column prop="gk_gg_h" label="公开/公告号" width="180">
                    </el-table-column>
                    <el-table-column prop="zlmc" label="专利名称" width="180">
                    </el-table-column>
                    <el-table-column prop="zllx" label="专利类型" width="180">
                    </el-table-column>
                    <el-table-column prop="zlnd" label="专利年度" width="100">
                    </el-table-column>
                    <el-table-column prop="gfjx" label="官方绝限" width="180">
                    </el-table-column>

                    <el-table-column prop="nfje" label="年费金额" width="120">
                    </el-table-column>

                    <el-table-column prop="nfzt" label="年费状态" width="180">
                    </el-table-column>


                    <el-table-column prop="famingren" align="left" label="发明人" :show-overflow-tooltip="true">

                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                            <el-button @click="payOver(scope.row)" type="text" size="small"
                                slot="reference">年费缴纳</el-button>
                            <el-button @click="checkout(scope.row)" type="text" size="small"
                                slot="reference">取消监控</el-button>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="bt__yw_" label="标题(英文)" width="180">
                    </el-table-column>
                    <el-table-column prop="famingren" align="left" label="发明人" :show-overflow-tooltip="true">
                       
                    </el-table-column>
                    <el-table-column prop="dyfmr" label="第一发明人">
                    </el-table-column>
                    <el-table-column prop="zy__zw_" label="摘要(中)" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="zy__yw_" label="摘要(英)" :show-overflow-tooltip="true">
                    </el-table-column> -->
                </el-table>

            </el-col>
        </el-row>
        <div style="text-align: right; margin-top: 20px;">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize" layout="total, prev, pager, next, sizes"
                :total="total">
            </el-pagination>
        </div>

        <!-- 查看详情 -->
        <el-dialog :span="24" :visible.sync="rowVisible" title="详情">
            <el-table :data="rowTableData" border style="width: 100%" align="center">
                <el-table-column property="zlfyzl" label="专利费用种类"></el-table-column>
                <el-table-column property="jfjzr" label="缴费截止日"></el-table-column>
                <el-table-column property="fyzt" label="费用状态"></el-table-column>
                <el-table-column property="nfzje" label="年费总金额"></el-table-column>
            </el-table>

        </el-dialog>


        <!-- 年费缴纳 -->
        <el-dialog :span="24" :visible.sync="payOverVisible" title="年费缴纳" width="70%">

            <el-form :model="form" ref="form" label-position="top">
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="专利名称" :label-width="formLabelWidth">
                            <el-input v-model="form.zlmc" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="公开/公告号" :label-width="formLabelWidth">

                            <el-input v-model="form.gk_gg_h" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>

                    <el-col :span="8">

                        <el-form-item label="专利有效性" :label-width="formLabelWidth">
                            <el-input v-model="form.zlyxx" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>


                    </el-col>

                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">

                        <el-form-item label="申请日" :label-width="formLabelWidth">

                            <el-input v-model="form.shenqingri" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                        <el-form-item label="授权公告日" :label-width="formLabelWidth">
                            <el-input v-model="form.sqggr" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">

                        <el-form-item label="发明人" :label-width="formLabelWidth">

                            <el-input v-model="form.famingren" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                        <el-form-item label="官方绝限" :label-width="formLabelWidth">
                            <el-input v-model="form.gfjx" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="8">

                        <el-form-item label="专利类型" :label-width="formLabelWidth">

                            <el-input v-model="form.zllx" :disabled="true"></el-input>

                        </el-form-item>

                    </el-col>
                    <el-col :span="8">

                        <el-form-item label="专利年度" :label-width="formLabelWidth">
                            <el-input v-model="form.zlnd" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">

                        <el-form-item label="年费金额" :label-width="formLabelWidth">
                            <el-input v-model="form.nfje" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>


                    </el-col>

                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">

                        <el-form-item label="缴费方式" :label-width="formLabelWidth">

                            <!-- <el-input v-model="form.jffs" :disabled="true"></el-input> -->
                            <el-select v-model="jffs" placeholder="请选择">
                                <el-option v-for="item in jffsList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">



                    </el-col>
                </el-row>


                <el-row :gutter="24">
                    <el-col :span="24">

                        <el-form-item :label="'缴费年数-' + form.zllx + '（请选已经缴费的年度）'" :label-width="formLabelWidth">

                            <!-- <el-radio v-for="(item, index) in 10" v-model="form.jnns" label="index">第{{ index }}年</el-radio> -->
                            <!-- <el-radio-group v-model="form.jnns_syxx" v-if="form.zllx == '实用新型'">
                                <el-radio v-for="item in 10" :key="item" :label="item">
                                    第{{ item }}年
                                </el-radio>
                            </el-radio-group> -->
                            <el-checkbox-group v-model="form.jnns_syxx" v-if="form.zllx == '实用新型'">
                                <el-checkbox v-for="syxx in syxxList" :label='syxx' :key="syxx">{{ syxx }}</el-checkbox>
                            </el-checkbox-group>


                            <el-checkbox-group v-model="form.jnns_wgsj" v-if="form.zllx == '外观设计'">
                                <el-checkbox v-for="wgsj in wgsjList" :label='wgsj' :key="wgsj">{{ wgsj }}</el-checkbox>
                            </el-checkbox-group>


                            <el-checkbox-group v-model="form.jnns_fmzl" v-if="form.zllx != '外观设计' && form.zllx != '实用新型'">
                                <el-checkbox v-for="fmzl in fmzlList" :label='fmzl' :key="fmzl">{{ fmzl }}</el-checkbox>
                            </el-checkbox-group>
                            <!-- <el-radio-group v-model="form.jnns_wgsj" v-if="form.zllx == '外观设计'">
                                <el-radio v-for="item in 15" :key="item" :label="item">
                                    第{{ item }}年
                                </el-radio>
                            </el-radio-group> -->
                            <!-- <el-radio-group v-model="form.jnns_fmzl" v-if="form.zllx != '外观设计' && form.zllx != '实用新型'">
                                <el-radio v-for="item in 20" :key="item" :label="item">
                                    第{{ item }}年
                                </el-radio>
                            </el-radio-group> -->

                        </el-form-item>

                    </el-col>

                </el-row>


                <el-row :gutter="24">
                    <el-col :span="12">

                        <el-form-item label="专利年费状态" :label-width="formLabelWidth">

                            <el-input v-model="form.zlnfzt" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                        <el-form-item label="年费状态" :label-width="formLabelWidth">
                            <el-input v-model="form.nfzt" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>


                <el-row :gutter="24" v-if="jffs == '自缴'">
                    <el-col :span="24">

                        <el-form-item label="自缴网址" :label-width="formLabelWidth">
                            <div class="Url"><el-link  type="primary" :underline="false" href="http://cponline.cnipa.gov.cn" target="_blank">http://cponline.cnipa.gov.cn</el-link></div>
                                
                            
                            <!-- <el-input value="http://cponline.cnipa.gov.cn" :disabled="true" class="aaaa"> </el-input> -->
                        </el-form-item>

                    </el-col>

                </el-row>


                <el-row :gutter="24" v-if="jffs == '自缴'">
                    <el-col :span="24">

                        <el-form-item label="自缴文本内容" :label-width="formLabelWidth">
                            <el-input type="textarea" value="自缴信息：
一、网上缴费
1、缴费人可以通过“专利业务办理系统”网页版（http://cponline.cnipa.gov.cn）中“网上缴费”服务模块，在线提交需要缴费的申请号/专利号，查询应缴费用，生成订单并利用第三方支付平台完成实际支付。
2、缴费人可对生成的订单进行管理，对交易状态进行查询，查看并获取已开具的电子票据。
3、当事人办理网上缴费时，可以使用银行卡、微信、支付宝或者对公账户方式缴纳费用。

二、银行、邮局汇款缴费
缴费人应在银行、邮局汇款当天或次日，登录“专利业务办理系统”专利缴费服务中的“电子缴费清单”模块，填写对应的专利缴费信息，以电子缴费清单的形式在线提交。已提交的电子缴费清单可查询并下载。汇款账号如下：
1、银行汇款账户信息
  账户名称：国家知识产权局专利局
  开户银行名称：中信银行北京知春路支行
  账号：7111710182600166032
2、邮局汇付账户信息。
缴费人需要在汇单上写明专利号以及缴纳费用的名称（年费），以及汇款人姓名或名称及通讯地址（包括邮政编码）。
  收款人：国家知识产权局专利局收费处 商户客户号：110000860
3、由于电子票据由财政部统一开具和监制，为避免错误，请准确填写电子缴费清单。如需开具与汇款人/缴费人名称不一致的收据抬头时，务必在“电子缴费清单”中填写缴费信息。

三、 直接向专利局（包括专利局各代办处）缴纳
在大厅填写缴费清单后，到窗口通过现金、支票及银行卡等方式支付。

票据服务： 
1、开具电子票据后，将通过缴费时填写的电子邮箱发送取票码。缴费人可以凭取票码在“票据服务”中查询、查验、获取已开具的电子票据，并查看、获取归档在电子票夹的电子票据。
2、缴费人还可以以缴费时填写的手机号码为账号登录支付宝、微信电子票夹小程序查询、下载电子票据。
3、缴费人可以在“票据服务”中查询办理纸质票据相关业务、咨询其他票据业务。" autosize :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>


                <el-row :gutter="24" v-if="jffs == '代缴'">
                    <el-col :span="12">

                        <el-form-item label="代缴信息-专利申请号" :label-width="formLabelWidth">

                            <el-input v-model="form.zlsqh" placeholder="请输入文本内容"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                        <el-form-item label="代缴信息-缴费年度" :label-width="formLabelWidth">
                            <el-input v-model="form.jfnd" autocomplete="off" placeholder="请输入文本内容"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>


                <el-row :gutter="24" v-if="jffs == '代缴'">
                    <el-col :span="24">

                        <el-form-item label="代缴信息-缴费后收据抬头" :label-width="formLabelWidth">

                            <el-input v-model="form.jfhsjtt" type="text" placeholder="请输入文本内容"></el-input>
                        </el-form-item>

                    </el-col>

                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="payOverVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRow">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Cookies from "js-cookie";
export default {
    data() {
        return {
            userInfo:{},
            restaurants: [],
            state: '',
            timeout: null,
            formInline: {
                gk_gg_h: '',
                zlmc: '',
                gfjx: '',
                nfzt: ''

            },
            tableData: [],
            currentPage: 1,
            pageSize: 20,
            total: 0,
            bt_zw_: '',
            dyfmr: '',
            shenqingren: '',
            rowVisible: false,
            payOverVisible: false,
            rowItem: {},
            options: [{
                value: '已缴',
                label: '已缴'
            }, {
                value: '未缴',
                label: '未缴'
            }],
            rowTotal: 0,
            rowTableData: [],
            formLabelWidth: '100px',
            form: {
                gk_gg_h: '',

                zhaiyao: '',

                bt_zw_: '',
                jnns: 1
            },
            jffs: '自缴',
            jffsList: [{
                value: '自缴',
                label: '自缴'
            }, {
                value: '代缴',
                label: '代缴'
            }],
            syxxList: ['第1年', '第2年', '第3年', '第4年', '第5年', '第6年', '第7年', '第8年', '第9年', '第10年'],
            wgsjList: ['第1年', '第2年', '第3年', '第4年', '第5年', '第6年', '第7年', '第8年', '第9年', '第10年', '第11年', '第12年', '第13年', '第14年', '第15年'],
            fmzlList: ['第1年', '第2年', '第3年', '第4年', '第5年', '第6年', '第7年', '第8年', '第9年', '第10年', '第11年', '第12年', '第13年', '第14年', '第15年', '第16年', '第17年', '第18年', '第19年', '第20年'],

        }
    },
    created() {

    },
    mounted() {
        this.getCookie();
        this.getFilterRows();
        console.log(this.userInfo.danwei)
    },
    methods: {
        getCookie() {
            this.userInfo = JSON.parse(Cookies.get("userInfo"));
        },
        onSubmit() {
            console.log('submit!');
            this.getFilterRows()
        },

        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            console.log(item);
        },
        resetForm(formName) {
            this.formInline.gk_gg_h = ''
            this.formInline.zlmc = ''
            this.formInline.gfjx = ''
            this.formInline.nfzt = ''
            this.getFilterRows()
        },



        //
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getFilterRows()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getFilterRows()
        },

        //
        getFilterRows() {
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "6507fc1af74c7a63ac517a0b",
                "viewId": "650807ff344defc23291b172",
                "pageSize": this.pageSize,
                "pageIndex": this.currentPage,
                "sortId": "",
                "isAsc": "true",
                "filters": [
                    {
                        "controlId": "gk_gg_h",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": this.formInline.gk_gg_h
                    },
                    {
                        "controlId": "zlmc",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": this.formInline.zlmc
                    },
                    {
                        "controlId": "nfzt",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": this.formInline.nfzt
                    },
                    {
                        "controlId": "ssdw",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": this.userInfo.danwei
                    }
                ]
            }
            var gfjx = {
                "controlId": "gfjx",
                "dataType": 15,
                "spliceType": 1,
                "filterType": 11,
                "dateRange": 18,
                "minValue": this.formInline.gfjx[0],
                "maxValue":this.formInline.gfjx[1]
            }
            if (this.formInline.gfjx != '') {
                param.filters.splice(2, 0, gfjx)
            }
            this.$apiFun.getFilterRows(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                console.log(res)
                this.total = res.data.total
                this.tableData = res.data.rows
            })
        },


        //查看详情
        handleClick(row) {
            this.rowItem = row
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "6507fc1af74c7a63ac517a0b",

                "rowId": row.rowid,
                "controlId": "nfjntx"
            }
            this.$apiFun.getRowRelations(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                console.log(res)
                this.rowVisible = true
                this.rowTotal = res.data.total
                this.rowTableData = res.data.rows
            })


        },
        payOver(row) {
            this.rowItem = row
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "6507fc1af74c7a63ac517a0b",
                "rowId": row.rowid
            }
            this.$apiFun.getRowByIdPost(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                this.form = res.data
                this.payOverVisible = true
            })

        },

        //取消监控
        checkout(row) {
            var param = {
                "rowid": row.rowid,
                "jiankongxiang": 0
            }
            this.$apiFun.checkout(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                console.log(res)
                this.$message({
                    message: '取消监控成功',
                    type: 'success'
                });
                this.getFilterRows()
            })

        },
        //提交
        addRow() {
            if (this.form.zllx == '实用新型') {
                if (this.form.jnns_syxx.length == 0) {
                    this.$message('请选择缴纳年数');
                    return
                }
            }
            if (this.form.zllx == '外观设计') {
                if (this.form.jnns_wgsj.length == 0) {
                    this.$message('请选择缴纳年数');
                    return
                }
            }
            if (this.form.zllx != '实用新型' && this.form.zllx != '外观设计') {
                if (this.form.jnns_fmzl.length == 0) {
                    this.$message('请选择缴纳年数');
                    return
                }
            }
            if (this.jffs == '代缴') {
                if (this.form.zlsqh == undefined) {
                    this.$message('请输入专利申请号');
                    return
                }
                if (this.form.jfnd == undefined) {
                    this.$message('请输入缴费年度');
                    return
                }
                if (this.form.jfhsjtt == undefined) {
                    this.$message('请输入缴费后收据抬头');
                    return
                }
            }
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "6507fc1af74c7a63ac517a0b",
                "rowId": this.rowItem.rowid,
                "controls": [
                    {
                        "controlId": "zlmc",
                        "value": this.form.zlmc
                    },
                    {
                        "controlId": "gk_gg_h",
                        "value": this.form.gk_gg_h
                    },
                    {
                        "controlId": "shenqingri",
                        "value": this.form.shenqingri
                    },
                    {
                        "controlId": "zllx",
                        "value": this.form.zllx
                    },

                    {
                        "controlId": "sqggr",
                        "value": this.form.sqggr
                    },
                    {
                        "controlId": "jnns_fmzl",
                        "value": JSON.stringify(this.form.jnns_fmzl)
                    },
                    {
                        "controlId": "jnns_syxx",
                        "value": JSON.stringify(this.form.jnns_syxx)
                    },
                    {
                        "controlId": "jnns_wgsj",
                        "value": JSON.stringify(this.form.jnns_wgsj)
                    },
                    {
                        "controlId": "zlnfzt",
                        "value": this.form.zlnfzt
                    },
                    {
                        "controlId": "jffs",
                        "value": this.jffs
                    },
                    {
                        "controlId": "zjwz",
                        "value": this.form.zjwz
                    },
                    {
                        "controlId": "zjwbnr",
                        "value": this.form.zjwbnr
                    },
                    {
                        "controlId": "zlsqh",
                        "value": this.form.zlsqh
                    },
                    {
                        "controlId": "jfnd",
                        "value": this.form.jfnd
                    },
                    {
                        "controlId": "jfhsjtt",
                        "value": this.form.jfhsjtt
                    },
                    // {
                    //     "controlId": "zlybk",
                    //     "value": this.form.zlybk
                    // },
                    {
                        "controlId": "nfzt",
                        "value": this.form.nfzt
                    },
                    {
                        "controlId": "famingren",
                        "value": this.form.famingren
                    },
                    {
                        "controlId": "nfjntx",
                        "value": this.form.nfjntx
                    },
                    {
                        "controlId": "zlyxx",
                        "value": this.form.zlyxx
                    }, {
                        "controlId": "jiankongxiang",
                        "value": this.form.jiankongxiang
                    },
                ]
            }
            console.log(param)
            this.$apiFun.editRow(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理

                this.payOverVisible = false

                this.getFilterRows()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.patent {
    background-color: #fff;
    padding: 15px;
}

.el-form-item {
    text-align: left;
}

.el-radio-button__inner,
.el-radio-group {
    line-height: 40px;
}
.Url{
    width:100%;
    height:40px;
    border:1px solid #DCDFE6;
    background-color:#F5F7FA;
    a{
        width:300px;
        height:40px;
        line-height:40px;
        color:#409EFF;
        font-size:14px;
    }
}
</style>